<template>
  <div class="container">
    <!--我的位置-->
    <div class="breadcrumb">
      <span class="text-color-666">您的位置</span>
      <span class="el-icon-arrow-right"></span>
      <span class="text-color-666">关于我们</span>
      <span class="el-icon-arrow-right"></span>
      <span class="text-c-blue">{{selected.title}}</span>
    </div>

    <!--内容展示-->
    <div class="content">
      <ul class="title-list">
        <li v-for="item in weiya" :class="item.title==selected.title?'active':''" @click="clicktitle(item)"
          :key='item.id'>{{item.title}}</li>
      </ul>

      <div class="detail">
        <div class="detail-img">
          <img src='./assets/img/about-img.jpg' alt="" />
        </div>
        <div class="detail-introl">
          <span v-html="selected.content">

          </span>
          <span v-show="selected.title=='服务协议'" class='text-style-protocol' @click='yuedupro'>《维修师服务协议》</span>
        </div>
      </div>
      <el-dialog title="维修师服务协议" :visible.sync="dialogPro" width="85%" center top="1%">
        <wy-protocol></wy-protocol>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogPro = false" style="padding: 5px 8px;">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import r from '../../utils/RequestUtilcopy'
  import WyProtocol from './assembly/protocol'
  export default {
    name: "aboutUs",
    components: {
      WyProtocol
    },
    data: function () {
      return {
        selected: {
          title: "",
          content: "",
        },
        weiya: [{
            title: "公司简介",
            content: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海**信息技术有限公司成立于**年*月，坐落于**，公司始终坚持以：科技创新，合作共赢，诚信高效，结果导向。我们以一流的服务理念，坚持以高新技术品牌打造企业。维修师结合传统电子商务，通过整合线上线下相关资源，向用户提供方便快捷、安全可靠的优质数码产品维修服务。**专注于数码3C市场的综合性交易平台，结合手机维修、新品发布、抢购等，为用户提供手机3C数码一站式综合服务。",
          },
          {
            title: "加入我们",
            content: "<p>招聘岗位：</p><p>手机维修工程师,</p><p>1.依照公司系统派发的维修订单信息，完成上门维修服务。</p><p>2.上门为公司客户提供手机方面的维修服务，包括功能检测，故障排查，配件更换。</p>" +
              "<p>3.底薪+提成+绩效，多劳多得，工作效率和服务质量决定收入。</p><br /><p>任职资格：</p><p>1.高中以上学历，有自己的职业规划，学习能力强，善于沟通。</P><p>2.从事手机维修服务行业1年以上，能独立完成iPhone,iPad，安卓手机的故障件更换。</P>" +
              "<p>3.独立处理、解决突发事件的能力，服从上级安排，可接受加班。</p><p>4.个人形象端正，普通话标准，无明显口音。</p><br />" +
              "<p>公司福利：</p>1）不定期旅游&团建<br />" +
              "<br /><br />联系方式：<br />1、公司地址：上海市**区**路**弄<br />2、交通路线：<br />" +
              "①地铁*号线**地铁站（搭****免费班车）；<br />②多条公交线路：**路、**线等。<br />3、直线电话：021-66668888<br />4、招聘邮箱：hr@xxxx.com<br />",
          },
          {
            title: "服务协议",
            content: '',
          },
          {
            title: "联系我们",
            content: "维修服务 <br />服务方式：上门、寄修、到店<br />服务时间：9：00-20：00<br />联系方式：400-999-8888<br />详细地址：上海市**区**路**弄<br />" +
              "商务合作<br>联 系 人： 白先生<br />联系电话：166**** 6**8<br />联系邮箱：**@xxxx.com",
          },
          {
            title: "常见问题",
            content: "1、维修师是免费上门维修吗？<br>您好，维修师提供免费上门维修服务,不收取任何上门费用。<br>" +
              "2、维修师提供的配件是原厂的吗？<br />由于没有品牌授权，所以不能称之为原装配件。但品质保障安全可靠，非人为因素质保180天。<br />" +
              "3、我的屏幕碎了怎么收费？<br />您好，换屏是需要更换总成，内外屏一起更换，如果内屏没有瑕疵我们维修师回收旧屏，只收取外屏的费用。<br />" +
              "4、为什么你们的价格比其他维修店便宜？<br />您好，维修师的服务宗旨就是让客户以最低的价格享受最极致的服务<br />" +
              "5、维修师现在有哪几种预约下单的方式？<br />您好，可以通过微信公众号或400-960-8888预约下单.<br />" +
              "6、维修后是否提供质保？<br />您好，维修师维修完成的设备，非人为原因导致配件损坏的都提供180天的质保。<br />" +
              "7、我明天下午XX点有时间，让工程师XX点来可以嘛？<br />您好，我这边先帮您下单,工程师联系您的时候您可以和他预约具体的时间哦!",
          }
        ],
        dialogPro: false,
        index: 0
      }
    },
    methods: {
      clicktitle(item) {
        this.selected = item;
      },
      yuedupro() {
        this.dialogPro = true;
      },
      getQueryStr(sArgName) {
        let args = window.location.href.split("?");
        let retval = "";
        if (args[0] == window.location.href) /*参数为空*/ {
          return retval; /*无需做任何处理*/
        }
        let str = args[1];
        args = str.split("&");
        for (let i = 0; i < args.length; i++) {
          str = args[i];
          let arg = str.split("=");
          if (arg.length <= 1) continue;
          if (arg[0] == sArgName) retval = arg[1];
        }
        return retval;
      },
    },
    watch: {
      $route(to, from) {
        if (to.query.index != null && to.query.index != "" && to.query.index != undefined) {
          this.index = to.query.index;
          this.clicktitle(this.weiya[this.index]);
        } else {
          this.clicktitle(this.weiya[0]);
        }

      }
    },
    mounted: function () {
      this.index = this.getQueryStr('index');
      let model = {};
      if (this.index == '' || this.index == null) {
        model = this.weiya[0];
      } else {
        model = this.weiya[this.index];
      }
      this.clicktitle(model);
    }
  }

</script>

<style scoped="scoped">
  @import url("./assets/css/index.css");

  .container {
    min-height: 700px;
    margin-top: 100px;
  }

  .breadcrumb {
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #187bbd;
  }

  .text-color-666 {
    color: #666;
  }

  .el-icon-arrow-right:before {
    content: "\E604";
    color: #c0c4cc;
  }

  .text-c-blue {
    color: #2161A9;
  }

  .content {
    margin-top: 40px;
  }

  .title-list {
    border-bottom: 1px solid #187bbd;
    overflow: hidden;
  }

  .title-list li {
    width: 105px;
    float: left;
    font-size: 14px;
    margin-right: 20px;
    text-align: center;
    background-color: #CDCDCD;
    height: 32px;
    line-height: 34px;
    color: #666;
  }

  .active {
    color: #fff !important;
    background-color: #0465AB !important;
  }

  .detail {
    overflow: hidden;
    margin-top: 41px;
    margin-bottom: 61px;
  }

  .detail-img {
    width: 566px;
    float: left;
  }

  .detail-introl {
    width: 576px;
    float: right;
    color: #555;
    font-size: 16px;
    line-height: 28px;

    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 572px;
  }

  .text-style-protocol {
    color: #0FAFEB;
    cursor: pointer;
  }

</style>
